<template>
  <div class="flight-item">
    <div @click="showRecommend = !showRecommend">
      <!-- 显示的机票信息 -->
      <el-row type="flex" align="middle" class="flight-info">
        <el-col :span="6">
          <span>{{ flight.airline_name }} </span> {{ flight.flight_no }}
        </el-col>
        <el-col :span="12">
          <el-row
            type="flex"
            justify="space-between"
            class="flight-info-center"
          >
            <el-col :span="8" class="flight-airport">
              <strong>{{ flight.dep_time }}</strong>
              <span>{{ flight.org_airport_name }}{{ flight.org_airport_quay }}</span>
            </el-col>
            <el-col :span="8" class="flight-time">
              <span>{{ duration }}</span>
            </el-col>
            <el-col :span="8" class="flight-airport">
              <strong>{{ flight.arr_time }}</strong>
              <span>{{ flight.dst_airport_name }}{{ flight.dst_airport_quay }}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="flight-info-right">
          ￥<span class="sell-price">{{ bestPrice }}</span>起
        </el-col>
      </el-row>
    </div>
    <el-collapse-transition>
      <div v-show="showRecommend" class="flight-recommend">
        <!-- 隐藏的座位信息列表 -->
        <el-row type="flex" justify="space-between" align="middle">
          <el-col :span="4">
            低价推荐
          </el-col>
          <el-col :span="20">
            <el-row
              v-for="(seat, index) in flight.seat_infos"
              :key="index"
              type="flex"
              justify="space-between"
              align="middle"
              class="flight-sell"
            >
              <el-col :span="16" class="flight-sell-left">
                <span>{{ seat.group_name }}</span> | {{ seat.supplierName }}
              </el-col>
              <el-col :span="5" class="price">
                ￥{{ seat.settle_price }}
              </el-col>
              <el-col :span="3" class="choose-button">
                <el-button type="warning" size="mini" @click.stop="toOrder(seat.seat_xid)">
                  选定
                </el-button>
                <p v-if="seat.nums !== 'A'">
                  剩余：{{ seat.nums }}
                </p>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    flight: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      showRecommend: false
    }
  },
  computed: {
    // 计算出最低价格
    bestPrice () {
      let bestPrice = this.flight.seat_infos[0].org_settle_price_child
      for (let i = 0; i < this.flight.seat_infos.length; i++) {
        if (this.flight.seat_infos[i] > bestPrice) {
          bestPrice = this.flight.seat_infos[i]
        }
      }
      return bestPrice
    },
    // 计算出出发时间到 到达时间的时长
    duration () {
      // 先计算出出发时间和到达时间一共有多少分钟
      let depTime = this.flight.dep_time.split(':')
      let arrTime = this.flight.arr_time.split(':')
      depTime = Number(depTime[0] * 60) + Number(depTime[1])
      arrTime = Number(arrTime[0] * 60) + Number(arrTime[1])
      let durationTime = arrTime - depTime
      if (durationTime < 0) {
        durationTime += 24 * 60
      }
      durationTime = Math.floor(durationTime / 60) + '小时' + durationTime % 60 + '分钟'
      return durationTime
    }
  },
  methods: {
    toOrder (id) {
      this.$router.push({
        path: '/air/order',
        query: {
          // 因为提交订单需要这两个参数，所以要传过去
          id: this.flight.id,
          seat_xid: id
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.flight-item{
        border:1px #ddd solid;
        margin-bottom: 10px;

        .flight-info{
            padding:15px;
            cursor: pointer;

            > div{
                &:first-child, &:last-child{
                    text-align: center;
                }
            }
        }

        .flight-info-center{
            padding:0 30px;
            text-align: center;

            .flight-airport{
                strong{
                    display: block;
                    font-size:24px;
                    font-weight: normal;
                }
                span{
                    font-size: 12px;
                    color:#999;
                }
            }

            .flight-time{
                span{
                    display: inline-block;
                    padding:10px 0;
                    border-bottom: 1px #eee solid;
                    color:#999;
                }
            }
        }

        .flight-info-right{

            .sell-price{
                font-size: 24px;
                color:orange;
                margin:0 2px;
            }
        }
    }

    .flight-recommend{
        background: #f6f6f6;
        border-top:1px #eee solid;
        padding:0 20px;

        .flight-sell{
            border-bottom:1px #eee solid;
            padding:10px 0;

            &:last-child{
                border-bottom: none;
            }

            .flight-sell-left{
                font-size: 12px;
                span{
                    color:green;
                }
            }

            .price{
                font-size: 20px;
                color:orange;
            }

            .choose-button{
                text-align: center;
                color:#666;
                button{
                    display: block;
                    width:100%;
                    margin-bottom:5px;
                }
            }
        }
    }
</style>
